<template>
    <div class="right3">
      <el-table :data="tableData" ref="tableRef" style="width: 100%" :max-height="tableH">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.prop"
          :fixed="column.fixed"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align"
        />
      </el-table>
    </div>
  </template>
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref } from 'vue'
  const props = defineProps({
    xData: {
      type: Array,
      default: () => [],
    },
    sData: {
      type: Array,
      default: () => [],
    },
    data1: {
      type: Array,
      default: () => [],
    },
    data2: {
      type: Array,
      default: () => [],
    },
  })
  const tableColumns = ref([
    {
      fixed: false,
      prop: 'date',
      label: '地区',
      width: '100',
      align: 'center',
    },
    {
      prop: 'name',
      label: '居住人口数量',
      width: '120',
      align: 'center',
    },
    {
      prop: 'state',
      label: '专职消防队',
      width: '120',
      align: 'center',
    },
    {
      prop: 'city',
      label: '微型消防站',
      width: '120',
      align: 'center',
    },
  ])
  const tableData = ref([
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
    {
      date: '2016-05-05',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
    {
      date: '2016-05-06',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
    {
      date: '2016-05-07',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
  ])
  const tableH = ref('0px')
  const tableRef = ref(null);
  let timer = null;
  const clearScroll = () => {
    clearInterval(timer);
    timer = null;
  }
  const createScroll = () => {
    clearScroll();

    const table = tableRef.value.layout.table.refs
    const tablewrapper = table.bodyWrapper.firstElementChild.firstElementChild;
    timer = setInterval(() => {
      tablewrapper.scrollTop += 54;
      if (tablewrapper.clientHeight + tablewrapper.scrollTop === tablewrapper.scrollHeight) {
        tablewrapper.scrollTop = 0;
      }
    }, 1000);
  }
  const getTableH = () => {
    setTimeout(() => {
      tableH.value = document.querySelector('.right3').offsetHeight
      return `${tableH.value}px`
    }, 200)
  }

  onMounted(() => {
    getTableH()
    createScroll();
  })
  </script>
  <style scoped lang="scss">
  .right3 {
    width: 100%;
    height: 100%;
    flex: 1;
    //   border: 1px solid red;
    // 表格部分样式
    // 最外层透明
    ::v-deep .el-table,
    ::v-deep .el-table__expanded-cell {
      background-color: transparent;
      color: #93dcfe;
      font-size: 2.2rem;
      border-bottom: 1px solid transparent; // 去掉表格体 的 边框
    }
    /* 表格内背景颜色  */
    ::v-deep .el-table {
      th,
      tr,
      td {
        background-color: transparent;
        border: none;
        color: #93dcfe;
        font-size: 2.2rem;
        // height: 5px;
        font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
        font-weight: Normal;
      }
    }
    ::v-deep .el-table__body-wrapper {
      .el-table__body {
        // border: 1px solid red;
        // background-color: red;
        .el-table__row {
          border: 10px solid red;
          // background-color: yellow;
        }
      }
    }
    /* // 设置表格行高度 */
    ::v-deep .el-table__body tr {
      padding: 0;
      height: 54px;
      border: 1px solid red;
    }

    /* // 修改高亮当前行颜色 */
    ::v-deep .el-table tbody tr:hover > td {
      background: #063570 !important;
    }

    /* // 取消当前行高亮 */
    //   ::v-deep .el-table tbody tr {
    //     pointer-events: none;
    //   }

    /* 修改表头样式-加边框 */
    //   ::v-deep .el-table__header-wrapper {
    //      border: solid 1px #04c2ed;
    //   }

    /* // 表格斑马自定义颜色 */
    ::v-deep .el-table__row.warning-row {
      background: #01205a;
    }

    /* 去掉表格里的padding */
    ::v-deep .el-table .cell,
    .el-table th div {
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      font-size: 1.3rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  </style>
